<template>
    <div>
        <div class="addContainer">
            <el-button type="success" @click="showDepartment">{{this.addTitle}}</el-button>
        </div>

        <el-dialog :title="this.addTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="填写人" :label-width="formLabelWidth">
                    {{ this.username }}
                </el-form-item>
                <el-form-item v-if="this.type=='evaluate'" label="评价内容" :label-width="formLabelWidth">
                    <el-input  type="textarea" v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item v-if="this.type=='evaluate'" label="评价类型" :label-width="formLabelWidth">
                    <el-select v-model="form.remarkType" placeholder="请选择">
                        <el-option
                          label="自评"
                          value="1">
                        </el-option>
                        <el-option
                        label="他评"
                        value="2">
                      </el-option>
                      </el-select>
                </el-form-item>
                <el-form-item v-if="this.form.remarkType=='2' && this.type=='evaluate'" label="被评人员" :label-width="formLabelWidth">
                    <el-select v-model="form.evaluated_emp_no" placeholder="请选择">
                        <el-option
                          v-for="item in users"
                          :key="item.value"
                          :label="item.empName"
                          :value="item.empNo">
                        </el-option>
                      </el-select>
                </el-form-item>


                <!-- 添加任务的模板 -->
                <el-form-item v-if="this.type!=='evaluate'" label="任务标题" :label-width="formLabelWidth">
                    <el-input  v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item v-if="this.type!=='evaluate'" label="内容" :label-width="formLabelWidth">
                    <el-input type="textarea"  v-model="form.content" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item v-if="this.type!=='evaluate'" label="责任人" :label-width="formLabelWidth">
                        <el-select v-model="form.person" placeholder="请选择">
                            <el-option
                              v-for="item in users"
                              :key="item.value"
                              :label="item.empName"
                              :value="item.empNo">
                            </el-option>
                          </el-select>
                </el-form-item>

                <el-form-item v-if="this.type!=='evaluate'" label="目标类型" :label-width="formLabelWidth">
                    <el-select v-model="form.taskType" placeholder="请选择">
                        <el-option
                          label="短期目标"
                          value="1">
                        </el-option>
                        <el-option
                        label="长期目标"
                        value="2">
                      </el-option>
                      </el-select>
            </el-form-item>

            <el-form-item v-if="this.type!=='evaluate'" label="截止时间" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.dieDate" style="width: 30%;"></el-date-picker>
                <!-- <el-input v-model="form.birthday" autocomplete="off"></el-input> -->
              </el-form-item>



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addDepartment">确 定</el-button>
            </div>
        </el-dialog>


<div v-if="this.type=='evaluate'">
    <el-table :data="tableDataProp" style="width: 100%">
        <el-table-column prop="evaluationTime" label="日期" width="280">
        </el-table-column>
        <el-table-column prop="empName" label="评价人" width="280">
        </el-table-column>
        <el-table-column prop="content" label="内容">
        </el-table-column>
        <el-table-column prop="evaluatedEmpNo" label="被评价人编号" width="180">
        </el-table-column>

        <el-table-column label="操作">

            <template slot-scope="scope">
                <el-button type="success">编辑</el-button>
                &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                <el-popover placement="top" width="160" v-model="scope.row.visible">
                    <p>这是一段内容这是一段内容确定删除吗？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="cancelFn(scope.$index)">取消</el-button>
                        <el-button type="primary" size="mini" @click="sureDelete(scope.$index)">确定</el-button>
                    </div>
                    <el-button slot="reference" type="warning">删除</el-button>
                </el-popover>
            </template>


        </el-table-column>
    </el-table>
</div>


<div v-if="this.type=='task'">

    <el-table :data="tableDataProp" style="width: 100%">
        <el-table-column prop="title" label="任务名称" width="280">
        </el-table-column>
        <el-table-column prop="endDate" label="截止时间" width="280">
        </el-table-column>
        <el-table-column prop="content" label="内容">
        </el-table-column>
        <el-table-column prop="type" label="任务类型" width="180">
        </el-table-column>

        <el-table-column label="操作">

            <template slot-scope="scope">
                <el-button type="success">编辑</el-button>
                &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                <el-popover placement="top" width="160" v-model="scope.row.visible">
                    <p>这是一段内容这是一段内容确定删除吗？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="cancelFn(scope.$index)">取消</el-button>
                        <el-button type="primary" size="mini" @click="sureDelete(scope.$index)">确定</el-button>
                    </div>
                    <el-button slot="reference" type="warning">删除</el-button>
                </el-popover>
            </template>


        </el-table-column>
    </el-table>


</div>

           

        </div>


       
</template>

<script>

export default {
    name: 'common',
    props: {
        addTitle:{
            type:String
        },
        type:{
            type:String
        },
        username:{
            type:String
        },
        empNo:{
            type:Number
        },
        users:{
            type:Array
        },
        tableDataProp:{
            type:Array
        },
      
    },
    data() {
        return {
            tableData: [{
                evaluationTime: '2016-05-02',
                name: '王小虎',
                content: '上海市普陀区金沙江路 1518 弄',
                empNo: 0
            }],
            dialogFormVisible: false,
            formLabelWidth: "200px",
            form: {
                remark: "",
                username: this.username,
                empNo:this.empNo,
                remarkType:"1",
                evaluated_emp_no:""
            }
        }
    },
    mounted(){
        console.log(this.username,this.empNo)
        this.form.username =   this.username;
        this.form.empNo = this.empNo; 
    },
    methods: {
        showDepartment() {
            this.dialogFormVisible = true;
        },
        addDepartment() {
            this.dialogFormVisible = false
            console.log("form是？",this.form);
            this.$emit("addEvaluate",this.form)
        },
        cancelFn() {
            this.dialogFormVisible = false
        },
        sureDelete(index) {
            this.tableData[index].visible = false;
        },
        cancelFn(index) {
            this.tableData[index].visible = false;
        }
    }
}
</script>

<style>
.addContainer {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 50px;
}
</style>